<template>

    <nav>
        <ul>
            <router-link tag="li" :to="{name:'jiahao'}" active-class="active">
                <span><img style='scale(0.9);' src="https://image.hongbeibang.com/Fj1u8rBVnt5DLwXqhx8QKlRPLoGI?48X48&imageView2/1/w/48/h/48" alt=""></span>
            </router-link>
            <router-link tag="li" :to="{name:'guanzhu'}" active-class="active">
                <span>关注</span>
            </router-link>
            <router-link tag="li" :to="{name:'zuixin'}" active-class="active">
                <span>最新</span>
            </router-link> 
            <router-link tag="li" :to="{name:'daren'}" active-class="active">
                <span>达人</span>
            </router-link>
            <router-link tag="li" :to="{name:'lingdang'}" active-class="active">
                <span><img  src="https://image.hongbeibang.com/FjmYGE5z6RvQL-_fdLKuSGYfmwO2?48X48&imageView2/1/w/48/h/48" alt=""></span>
            </router-link>
            
        </ul>
    </nav>
</template>
<script>
export default {
 data () {
return {
}
 },
 mounted () {
}
}
</script>

<style lang="scss" scoped>
nav {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    line-height: 44px;
    position: fixed;
    top: 0;
    z-index:999;
    background-color: #fff;
    
    ul {
        padding: 0;
        height: 44px;
        display: flex;
        text-align: center;
        justify-content: space-around;
       
        
       li{
           &.active {
               color: red;
               
           }
           img{
               transform: scale(0.6);
            
           }
       }
       
       
    }
    
}

</style>
